<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        正常情况下：我们创建项目之后，默认的小图标是favicon.ico，我们想要自定义小图标只需要用新的图片替换掉favicon.ico即可，但是我直接替换掉favicon.ico并不生效：
        发现问题原因：项目使用了@vue/cli-plugin-pwa插件https://www.npmjs.com/package/@vue/cli-plugin-pwa
        这个插件会更改网页标签图标的路径，所以导致我们的项目中多出来一个public/img/icons文件夹
        所以，我们需要在vue.config.js中更改pwa.iconPaths的路径，favicon.ico才能生效，配置如下：
            module.exports = {
              pwa: {
                iconPaths: {
                  favicon32: 'favicon.ico',
                  favicon16: 'favicon.ico',
                  appleTouchIcon: 'favicon.ico',
                  maskIcon: 'favicon.ico',
                  msTileImage: 'favicon.ico'
                }
              }
            }
        注意：修改了vue.config.js文件后，一定要重启项目！！！！！
              重启之后如果图标还是没有改变，清除一下浏览器缓存即可生效

        用.jpg或.png格式制作成.ico图标的网站有很多，这里推荐一个比特虫：https://www.bitbug.net/
     -->
</body>
</html>